<template>
    <div class="edit">
        <div class="in">
            <!-- 头部 -->
            <div>
                <div class="box"></div>
                <span>编辑签约信息</span>
            </div>

            <!-- 居民信息 -->
            <div class="resident">
                <div class="title">居民信息 </div>

                <div class="box1">
                    <div>
                        <span class="font">姓名* </span>
                        <el-input v-model="input" disabled placeholder="李小明" max="20px" class="type" />
                    </div>

                    <div>
                        <span class="font">身份证号 </span>
                        <el-input v-model="input1" class="w-50 m-2 type" size="large"
                            placeholder="371425199809080423" />
                    </div>


                    <div class="example-block">
                        <span class="example-demonstration font">性别* </span>
                        <el-cascader v-model="value" :options="options" @change="handleChange" />
                    </div>
                </div>

                <div class="box2">
                    <div class="demo-date-picker">
                        <div class="block">
                            <span class="demonstration font">出生年月* </span>
                            <el-date-picker v-model="value1" type="date" placeholder="请选择日期" :size="size" clearable />
                        </div>
                    </div>

                    <div>
                        <span class="font">联系电话 </span>
                        <el-input class="w-50 m-2 type" size="large" placeholder="19054139088" />
                    </div>

                    <div>
                        <span class="font">现居地 </span>
                        <el-input class="w-50 m-2 type1" size="large" placeholder="上海杨浦区延安西路" />
                    </div>
                </div>

                <div class="example-block">
                    <span class="example-demonstration font">居民标签</span>
                    <el-cascader :options="options1" :props="props" clearable />
                </div>


                <div>
                    <div class="box3">
                        <span class="font">家庭成员</span>
                        <div><img src="../../../assets/liqing.png" alt=""></div>
                        <div><img src="../../../assets/wanglin.png" alt=""></div>
                        <span class="family">+关联家庭成员</span>
                    </div>
                </div>

                <!-- 签约信息 -->
                <div class="contract">
                    <div class="title">签约信息</div>
                </div>

                <div class="box4">
                    <span class="font">签约编号 20190009091</span>
                    <span class="font">签约状态 待审核</span>

                    <div class="example-block">
                        <span class="example-demonstration font">签约机构*</span>
                        <el-cascader v-model="value" :options="options2" @change="handleChange" />
                    </div>
                </div>

                <div class="box5">
                    <div class="example-block">
                        <span class="example-demonstration font">签约团队*</span>
                        <el-cascader v-model="value" :options="options3" @change="handleChange" />
                    </div>

                    <div class="example-block">
                        <span class="example-demonstration font">签约医生*</span>
                        <el-cascader v-model="value" :options="options4" @change="handleChange" />
                    </div>

                    <div class="example-block">
                        <span class="example-demonstration font">服务包*</span>
                        <el-cascader v-model="value" :options="options5" @change="handleChange" />
                    </div>
                </div>

                <div class="box6">
                    <span class="font">签约类型 首次签约</span>

                    <span class="font">签约周 1年</span>

                    <span class="font">费用 ￥120</span>
                </div>

                <div class="box7">
                    <div class="font">申请时间 2020/10/09 10:09:09</div>

                    <div class="demo-date-picker">
                        <div class="block">
                            <span class="demonstration font">生效日期* </span>
                            <el-date-picker v-model="value1" type="date" placeholder="请选择日期" :size="size" clearable />
                        </div>
                    </div>
                </div>

                <div class="box8">
                    <span style="margin-right:'8px'; display: block; width: 80px;" class="font">签约备注</span>
                    <el-input v-model="textarea" :rows="2" type="textarea" placeholder="请输入签约备注" class="text" />
                </div>

                <div>
                    <el-button type="primary" @click="save">保存</el-button>
                    <el-button @click="handleReturn">返回</el-button>
                </div>

            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import router from '../../../router'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'

const input = ref('')
const input1 = ref('')
const value = ref([])
const options = [
    {
        value: 'choose',
        label: '请选择'
    },
    {
        value: 'male',
        label: '男'
    },
    {
        value: 'female',
        label: '女'
    }
]
const handleChange = (value) => {
    console.log(value)
}

const handleReturn = () => {
    router.push('/contract/index')
}

const value1 = ref('')
const size = ref<'' | 'large' | 'small'>('')


const props = { multiple: true }
const options1 = [
    {
        value: '1',
        label: '全选'
    },
    {
        value: '2',
        label: '慢病护理'
    },
    {
        value: '3',
        label: '高血压'
    },
    {
        value: '4',
        label: '高血糖'
    },
    {
        value: '5',
        label: '冠心病'
    }
]

const options2 = [
    {
        value: '',
        label: '请选择'
    },
    {
        value: '',
        label: '罗西社区服务中心'
    },
    {
        value: '',
        label: '天明社区服务中心'
    },
    {
        value: '',
        label: '民进社区服务中心'
    }
]

const options3 = [
    {
        value: '',
        label: '请选择'
    },
    {
        value: '',
        label: '李明明团队'
    },
    {
        value: '',
        label: '王汉文团队'
    },
    {
        value: '',
        label: '李民进团队'
    }
]

const options4 = [
    {
        value: '',
        label: '请选择'
    },
    {
        value: '',
        label: '李明明'
    },
    {
        value: '',
        label: '王汉文'
    },
    {
        value: '',
        label: '李民进'
    }
]

const options5 = [
    {
        value: '',
        label: '请选择'
    },
    {
        value: '',
        label: '基础包 ￥240'
    },
    {
        value: '',
        label: '王汉文团队 ￥340'
    },
    {
        value: '',
        label: '李民进团队 ￥340'
    }
]

const textarea = ref('')
const save = () => {
    ElMessageBox.alert('保存成功, 即将跳往主页', {
    confirmButtonText: 'OK',
  }),
  setTimeout( () => router.push('/contract/index'), 1500)
}
</script>

<style scoped>
.edit {
    padding: 0 60px;
    background-color: rgb(242, 247, 251);
}

.in {
    background-color: rgb(255, 255, 255);
    min-width: 800px;
    padding: 20px;
}

.box {
    display: inline-block;
    width: 6px;
    height: 20px;
    background-color: rgba(41, 132, 248, 1);
    border-radius: 8px;
    margin-right: 10px;
}

.box1 {
    display: flex;
    justify-content: space-around;
    margin-bottom: 12px;
}

.box2 {
    display: flex;
    justify-content: space-around;
    margin-bottom: 24px;
}

.box3 {
    display: flex;
    margin-bottom: 24px;
    padding-left: 20px;
}

.box4 {
    display: flex;
    justify-content: space-around;
}

.box5 {
    display: flex;
    justify-content: space-around;
}

.box6 {
    display: flex;
    justify-content: space-around;
}

.box7 {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
}

.box8 {
    margin: 16px 0;
    display: flex;

}


.text {
    width: 600px;
}

.family {
    color: rgb(41, 132, 248);
    display: block;
    width: 110px;
    height: 18px;
    margin-top: 28px;
}

.family:hover {
    border-bottom: 1px solid rgb(41, 132, 248);
}

.title {
    margin: 32px 0;
}

.type1 {
    width: 300px;
    height: 32px;
}

.type {
    width: 200px;
    height: 32px;
}

.font {
    font-size: 14px;
    color: rgb(153, 153, 153);
    margin-right: 5px;
}

.example-block {
    margin: 1rem;
    margin-top: 0;
}

.example-demonstration {
    margin: 1rem;
}
</style>
